import { View, Text, useWindowDimensions, SafeAreaView, FlatList, StyleSheet, Image, TouchableOpacity, Dimensions } from 'react-native'
import React from 'react'
import { Link } from 'expo-router'
import axios from '../../axios'
import UnRead from './UnRead'
import LastTalk from './LastTalk'



// axios.defaults.baseURL='http://10.0.2.2:3000/lxs'


const messageList: React.FC<propType> = ({ friends }) => {



  let getUnRead=async(from,to)=>{
    axios.get('/lxs/getUmRead',{params:{
      from:from,
      to:to
    }}).then(res=>{
      return res.data.num
    })
}



type itemObject = {
username: string,
_id: string
}

type propType = {
friends: itemObject[]
}

type ItemProps = { item: itemObject };

const Item = ({ item }: ItemProps) => (
<Link href={{ pathname: "想要跳转的路由", params: { id: item._id ,name:item.username} }} asChild >
  <TouchableOpacity
  onPress={()=>{goTalk(item)}}
  >
    <View style={{
      padding: 10, flexDirection: "row",
      height: useWindowDimensions().height * 0.1
    }}>
      <Image
        style={{ width: useWindowDimensions().height * 0.08, height: useWindowDimensions().height * 0.08, borderRadius: 50, marginLeft: 10 }}
        source={{
          uri: `${item.avatar}`
        }}
      />
      <View style={{ marginLeft: 20 ,marginTop:Dimensions.get('window').height * 0.01}}>
        <Text style={{ fontWeight: "bold", fontSize: 15 }}>{item?.username}</Text>
      </View>

      <View 
      style={[styles.lastTalk,{left:useWindowDimensions().height * 0.12}]}
      >
        <LastTalk from={item?._id} to={1} ></LastTalk>
      </View>
      
      <Text 
      style={styles.unRead}
      >
        <UnRead from={item?._id} to={1}></UnRead>
      </Text>

    </View>
  </TouchableOpacity>
</Link>
);



  return (
    <View style={{ borderTopColor: "black", width: "100%", height: Dimensions.get('window').height * 0.71, marginTop: 20, }}
    >
      <SafeAreaView>
        <FlatList
          data={friends}
          renderItem={({ item }) => <Item item={item} />}
          keyExtractor={item => item._id}
        />
      </SafeAreaView>
    </View>
  )
}

const styles = StyleSheet.create({
  unRead:{
    position:"absolute",
    right:Dimensions.get('window').width*0.1,
    height:Dimensions.get('window').height * 0.03,
    width:Dimensions.get('window').height*0.03,
    textAlign:"center",
    lineHeight:Dimensions.get('window').height * 0.03,
    top:Dimensions.get('window').height*0.03,
  },
  lastTalk:{
    position:"absolute",
    top:Dimensions.get('window').height * 0.06,
    // left:Dimensions.get('window').width*0.21,
  }
})

export default messageList